<!doctype html>
<html>
<head>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>横向拖动</title>
	<style>
		*{margin:0;padding:0;list-style:none;}
		.box{background:#aaa;width:100%;height:300px;overflow:hidden;position:relative;border:1px solid #000;box-sizing:border-box;}
		.list{position:absolute;left:0;top:0;}
		.list li{width:200px;height:200px;background:#f40;float:left;border:1px solid #000;font-size:30px;line-height:200px;text-align:center;color:#fff;font-weight:600;box-sizing:border-box;}
		.scrollBar{width:100px;height:30px;border-radius:30px;background:#390;position:absolute;bottom:0;cursor:pointer;left:0;}
	</style>
</head>
<body style="max-width:640px;margin:0 auto;">
	<div class="box" id="box">
		<ul class="list" id="list">
			<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
		</ul>
		<div class="scrollBar" id="scrollBar"></div>
	</div>
	<script>
		var scroll=function(){
			var box=document.getElementById('box');
			var	list=document.getElementById('list');
			var	scrollBar=document.getElementById('scrollBar');
			list.style.width=list.querySelector('li').offsetWidth*5+'px';
			var	ratio=(list.offsetWidth-box.offsetWidth)/(box.offsetWidth-scrollBar.offsetWidth);
			scrollBar.onmousedown=function(e){
				var e=e || window.event;
				var	startX=e.pageX-scrollBar.offsetLeft;
				document.onmousemove=function(e){
					var e=e || window.event;
					var	moveX=e.pageX-startX;
					if(moveX<=0){
						moveX=0;
					}else if(moveX>=(box.offsetWidth-scrollBar.offsetWidth)){
						moveX=box.offsetWidth-scrollBar.offsetWidth;
					}
					scrollBar.style.left= moveX+'px';
					list.style.left=-moveX*ratio+'px';
					return false;
				};
				document.onmouseup=function(){
					document.onmousemove=null;
					document.onmouseup=null;
				};
				return false;	
			};
			// 移动端
			scrollBar.addEventListener('touchstart',function(e){
				var touches=e.touches[0];
				var startX=touches.pageX-scrollBar.offsetLeft;
				this.addEventListener('touchmove',function(e){
					var touches=e.touches[0];
					var moveX=touches.pageX-startX;
					if(moveX<=0){
						moveX=0;
					}
					if(moveX>(box.offsetWidth-scrollBar.offsetWidth)){
						moveX=box.offsetWidth-scrollBar.offsetWidth;
					}
					console.log(startX,moveX)
					scrollBar.style.left= moveX+'px';
					list.style.left=-moveX*ratio+'px';
					e.preventDefault();return false;
				});
				e.preventDefault();return false;
			});
			document.addEventListener('touchend',function(){
				scrollBar.removeEventListener('touchmove',function(e){
					e.preventDefault();return false;
				},false);
			});
		};
		scroll();
	</script>
</body>
</html>